Skip to content

feat: interactive force-directed knowledge graph viewer (#118)#238

Merged
Pratiyush merged 1 commit into
masterfrom
feat/118-interactive-graph-viewer
Apr 17, 2026
Merged

feat: interactive force-directed knowledge graph viewer (#118)#238
Pratiyush merged 1 commit into
masterfrom
feat/118-interactive-graph-viewer

Conversation

@Pratiyush
Copy link
Copy Markdown
Owner

Summary

Closes #118. Upgrades llmwiki/graph.py's static HTML to a full interactive viewer that matches Karpathy's "Obsidian-graph quality" bar — search, click-to-navigate, dark/light theme, orphan highlight, cluster toggle, stats panel.

New capabilities

Feature Where
Live search (dim non-matches) #search-input in header
Click a node → open wiki page vis-network click handler
Stats panel (pages / edges / orphans / avg / top-5 hubs) #stats-overlay (bottom-right)
Orphan highlight (red 3 px border) isOrphan branch in node builder
Cluster by type #cluster-toggle, uses network.cluster()
Dark/light theme (localStorage-synced with site) #theme-toggle + CSS [data-theme] palettes
Offline CDN fallback notice #offline-notice + typeof vis === 'undefined' guard
Legend #legend top-right

Site integration

  • New copy_to_site() helper: build_site() now writes site/graph.html on every build.
  • New "Graph" entry in the site nav (between "Compare" and "Changelog").
  • Verified end-to-end: python3 -m llmwiki buildwrote site/graph.html (interactive graph viewer).

XSS hygiene

  • Stats panel escapes node IDs with escapeHtml().
  • write_html() escapes literal </script> inside the embedded JSON before injection, so a wiki page titled </script> can't break out of the payload.

Test plan

  • 25 new tests in tests/test_graph_viewer.py pass (graph-builder edge cases, every interactive feature, JSON injection, </script> escape, copy_to_site(), site-nav integration, 25 kB template budget)
  • Full suite: 1549 passed, 10 skipped
  • python3 -m llmwiki build emits site/graph.html + nav link
  • Commit GPG-signed
  • CHANGELOG updated under ### Added
  • No new runtime dependencies (vis-network stays on CDN)

Out of scope (tracked separately)

  • Embedding the graph as a preview widget on the home page (issue left it as an alternative — full page is shipping instead)
  • 3D graph (non-goal per issue)

Checklist

  • One intent per PR
  • Conventional-commit title
  • GPG-signed commits, no AI co-author trailers
  • Tests added (25)
  • CHANGELOG entry
  • No breaking changes
  • Stdlib-only Python — no new pip deps
  • Dark + light mode verified via CSS-var palette

Upgrade `llmwiki/graph.py`'s HTML template into a full interactive
viewer per Karpathy's spec. New capabilities on top of the existing
vis-network force layout:

- Live search input filters nodes by label/id (dims non-matches)
- Click a node to open its wiki page in a new tab
  (wiki/entities/Foo.md → entities/Foo.html rewrite)
- Stats overlay panel: pages, edges, orphans, avg connections,
  top-5 hubs
- Orphan highlighting: nodes with zero inbound links get a red
  3 px border
- Cluster-by-type toggle (sources / entities / concepts / syntheses)
- Dark/light theme toggle that mirrors the site's localStorage
  key — both palettes drive the same CSS custom properties
- Offline fallback notice if vis-network CDN fails to load

Site integration: new `copy_to_site()` helper wires the viewer into
`build_site()` so `python3 -m llmwiki build` writes `site/graph.html`
and the nav gains a "Graph" link between "Compare" and "Changelog".

XSS-defensive: stats panel uses `escapeHtml()` on user labels and
`write_html()` escapes literal `</script>` in the embedded JSON.

25 tests covering the graph builder edge cases, every interactive
feature, JSON injection, closing-tag escape, `copy_to_site()`
behaviour, site-nav integration, and a 25 kB template size budget.
@Pratiyush Pratiyush merged commit 2eadf92 into master Apr 17, 2026
9 checks passed
@Pratiyush Pratiyush deleted the feat/118-interactive-graph-viewer branch April 17, 2026 22:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(v1.0): interactive knowledge graph viewer with force-directed layout

1 participant